<template>
  <div>
    <a-breadcrumb style="margin: 16px 0;text-align:left">
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>用户列表</a-breadcrumb-item>
    </a-breadcrumb>
    <div>

      <!--加载旋转-->
      <a-spin v-show="loading" />

      <!--数据表格-->
      <a-table
        :columns="columns"
        :data-source="list"
      >

        <!--自定义插槽  显示用户头像 record是当前行的数据对象-->
        <span
          slot="avator"
          slot-scope="text, record"
        >
          <img
            :src="record.avator"
            style="border-radius:50%; width:50px;height:50px"
          >
        </span>

        <!--自定义插槽  显示操作选项 record是当前行的数据对象-->
        <span
          slot="action"
          slot-scope="text, record,key"
        >

          <a @click="onAdd">新增
          </a>
          <a-divider type="vertical" />
          <a @click="onEdit(record,key)">编辑
          </a>
          <a-divider type="vertical" />
          <a @click="onDel(record,key)">删除</a>
        </span>
      </a-table>

    </div>
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: "id",
    key: "id",
    title: "ID"
  },
  {
    dataIndex: "name",
    title: "姓名"
  },
  {
    dataIndex: "sex",
    title: "性别"
  },
  {
    title: "年龄",
    dataIndex: "age"
  },
  {
    title: "头像",
    dataIndex: "avator",

    scopedSlots: { customRender: "avator" }
  },

  {
    title: "操作",

    scopedSlots: { customRender: "action" }
  }
];

export default {
  created() {
    this.loading = true;
    this.$store.dispatch("GET_USERS").then(() => {
      this.list = this.$store.state.users;
      this.loading = false;
    });
  },
  data() {
    return {
      list: [],
      loading: false,
      columns
    };
  },

  methods: {
    onEdit(record) {
      console.log("recard", record);
      this.$router.push("/admin/user/" + record.id);
    },
    onDel(record) {
      console.log("recard", record);
      this.$store.commit("delUser", record);
    },
    onAdd() {
      this.$router.push("/admin/user/add");
    }
  }
};
</script>